<template>
	<view class="set-password-body">
		<u-form :model="form" ref="uForm" :error-type="errorType">
			<u-form-item   prop="email">
				<u-input placeholder="请输入要绑定的邮箱"   type="text"  v-model="form.email" />
			</u-form-item>
			<u-form-item  prop="password">
				<u-input placeholder="请输密码"  password-icon type="password"  v-model="form.password" />
			</u-form-item>
			
			<button type="default" @tap="submit" :disabled="disabled" :loading="loading" class="button">提交</button>
		</u-form>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				loading:false,
				disabled:true,
				errorType: ['message', 'border-bottom'],
				form: {
					password: '',
					email: ''
				},
				//表单验证
				rules:{
					password:[{
						required: true, 
						message: '密码不能为空', 
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['blur'],
					},
					{
						min: 5, 
						message: '密码不能少于5位',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['blur'],
					}
					],
					email:[{
						required: true,
						message: '邮箱不正确', 
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['blur'],
					},
					
					{	required: true,
						message: '邮箱不正确',
						trigger: ['blur'],
						validator:(rule, value, callbac)=>{
						// 可以单个或者同时写两个触发验证方式
						return	this.$u.test.email(value)
						}						
					}
					]
					
				}
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		watch:{
		'form.password'(){
			this.showdisabled()
		},
		'form.email'(){
			this.showdisabled()
		}
		},
		methods:{
			//是否禁用提交按钮
			showdisabled(){
				if(this.form.oldpassword!=''&&this.form.newpassword!=''&&this.form.repassword!=''){
					if(this.form.newpassword==this.form.repassword){
						this.disabled=false
						return
					}
					this.disabled=true
				}
				this.disabled=true
			},
			submit() {
					this.$refs.uForm.validate(valid => {
						this.loading=true
						if (valid) {
							console.log('验证通过');
							setTimeout(()=> {
								this.loading=false
							}, 1000);
						} else {
							console.log('验证失败');
							setTimeout(()=> {
								this.loading=false
							}, 1000);
						}
						
						});
					}
		}
	}
</script>

<style>
	.set-password-body{
		margin: 10upx 20upx;
	}
	.button{
		background-color: #FFE933;
		margin: 20upx 40upx;
		
	}
</style>
